<template>
	<view style="padding: 20px;">
		<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas01">
		</canvas>
		<view class="button" v-if="isShow" @tap="saveImage">
			<view>保存至相册</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				SystemInfo: {},
				isShow: false,
				filePath: '',
			}
		},
		async onLoad() {

			// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
			let goodsImgUrl = '../../static/common/poster-bg.png' // 主图本地路径，也可以用网络地址
			let ewmImgUrl = '../../static/common/kefu.png'
			let headerImg = '../../static/common/kefu.png'
			let userName = '哈哈哈'
			// this.$api.SharePosterApi().then(async res => {
			// 	console.log('海报背景', res.data.msg.value)
			// 	goodsImgUrl = await this.getImageInfo(res.data.msg.value)
			// })
			// this.$api.GetWechatCodeApi().then(async res => {
			// 	console.log('二维码图片', res)
			// 	ewmImgUrl = await this.getImageInfo(res.data.src)
			// })
			// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
			this.SystemInfo = await this.getSystemInfo();
			this.canvasW = this.SystemInfo.windowWidth - 40; // 画布宽度
			this.canvasH = this.SystemInfo.windowHeight - 110; // 画布高度

			// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
			if (true) {
				console.log('读取图片信息成功')
				uni.showToast({
					icon: 'loading',
					mask: true,
					duration: 10000,
					title: '海报绘制中',
				});
				setTimeout(() => {
					var ctx = uni.createCanvasContext('myCanvas', this);
					// 1.填充背景色，白色
					ctx.setFillStyle('#fff'); // 默认白色
					ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

					// 背景图
					ctx.drawImage(goodsImgUrl, 0, 0, this.canvasW, this
						.canvasH - 150) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
					//二维码
					ctx.drawImage(ewmImgUrl, this.canvasW - 120, this.canvasH - 130, 100,
						100) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
					// // 绘制圆形头像
					// let logoWidth = 30;
					// let logoHeight = 30;
					// let logoX = 25;
					// let logoY = this.canvasH - 106;
					// // 绘制为圆形标志
					// ctx.save();
					// ctx.beginPath();
					// // 先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
					// ctx.arc(logoWidth / 2 + logoX, logoHeight / 2 + logoY, logoWidth / 2, 0, Math.PI * 2,
					// 	false);
					// ctx.closePath();
					// // 画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
					// ctx.clip();
					// // 填充标志图片
					// ctx.drawImage(headerImg, logoX, logoY, logoWidth, logoHeight);
					// // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
					// ctx.restore();

					//添加白色边框
					ctx.setStrokeStyle('#fff')
					ctx.stroke();


					// 用户信息
					ctx.setFontSize(18) // 字号
					ctx.setFillStyle('#000') // 颜色
					ctx.fillText(userName, 63, this.canvasH - 85); // （文字，x，y）
					ctx.setFontSize(12)
					ctx.setFillStyle('#000')
					ctx.fillText('邀请你一起分享赢好礼呦~邀请你一起分享赢好礼呦~邀请你一起分享赢好礼呦', 24, this.canvasH - 53);


					// draw方法 把以上内容画到 canvas 中
					ctx.draw(true, (ret) => {
						this.isShow = true // 显示按钮-保存图片到相册
						uni.showToast({
							icon: 'success',
							mask: true,
							title: '绘制完成',
						});
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'myCanvas',
							quality: 1,
							complete: (res) => {
								// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
								console.log('生成海报地址', res.tempFilePath)
								this.filePath = res.tempFilePath
							},
						})
					});
				}, 3500)

			} else {
				console.log('读取图片信息失败')
			}
		},

		methods: {
			canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
				var ctx = canvas.getContext("2d");
				var lineWidth = 0;
				var canvasWidth = c.width;
				var lastSubStrIndex = 0;
				for (let i = 0; i < str.length; i++) {
					lineWidth += ctx.measureText(str[i]).width;
					if (lineWidth > canvasWidth / 8 * 5) {
						ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
						initY += lineHeight;
						lineWidth = 0;
						lastSubStrIndex = i;
					}
					if (i == str.length - 1) {
						ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
					}
				}
			},
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							console.log('加载到本地', res)
							req(res.path)
						},
					});
				})
			},

			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},

			// 保存图片到相册
			saveImage() {
				let path = this.filePath //从缓存中读取临时文件路径	
				console.log(path)
				wx.saveImageToPhotosAlbum({
					filePath: path,
					success(res) {
						uni.showToast({
							icon: 'success',
							mask: true,
							title: '保存到相册了',
						});
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.button {
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background: #FFFFFF;
		box-shadow: 0px -1px 2px rgba(84, 84, 84, 0.13);

		view {
			text-align: center;
			padding: 26rpx 0;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(180deg, #FD575C 0%, #F13E42 100%);
			box-shadow: 0px 2px 4px 1px rgba(251, 27, 27, 0.5);
			border-radius: 50px;
		}
	}
</style>